<template>
  <div class="p-2">
    <div class="panel">
      <h4 class="panel-title">基本信息</h4>
      <el-form :model="form" label-width="80px" :inline="true">
        <el-row :gutter="10">
          <el-col :span="2.5">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <el-form-item label="登录账号" prop="userName">
              <el-input v-model="form.userName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="panel">
      <h4 class="panel-title">
        收益信息
        <el-popover placement="top-start"  effect="dark" :width="180" trigger="hover" content="不同渠道需要单独配置收益信息">
          <template #reference>
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </template>
        </el-popover>
      </h4>
      <div>
        <el-row :gutter="20" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd()">添加</el-button>
          </el-col>
        </el-row>
        <el-table
            v-loading="loading"
            :data="ratios"
            ref="tableRef">
          <el-table-column label="渠道编码" align="center" prop="channel">
            <template #default="scope">
              <el-select v-model="scope.row.channel" placeholder="请选择推广渠道" clearable>
                <el-option :key="'0'" :label="'默认通用'" :value="'0'" />
                <el-option v-for="channel in channelList" :key="channel.channelCode" :label="channel.channelName" :value="channel.channelCode" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="支付名称" align="center" prop="paymentWayName">
            <template #default="scope">
              <el-select v-model="scope.row.paymentWay" placeholder="请选择支付方式" clearable style="width: 240px">
                <el-option v-for="product in productList" :key="product.code" :label="product.name" :value="product.code" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="金额区间" align="center" prop="amountRange">
            <template #default="scope">
              <el-select v-model="scope.row.amountRange" placeholder="请选择金额区间" clearable style="width: 240px">
                <el-option v-for="dict in biz_pay_amount_range" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </template>
          </el-table-column>
          <!--<el-table-column label="最小金额" align="center" prop="minAmount">
            <template #default="scope">
              <span><el-input-number v-model="scope.row.minAmount" /></span>
            </template>
          </el-table-column>
          <el-table-column label="最大金额" align="center" prop="maxAmount">
            <template #default="scope">
              <span><el-input-number v-model="scope.row.maxAmount" /></span>
            </template>
          </el-table-column>-->
          <!--<el-table-column label="支付编码" align="center" prop="paymentWay" />-->
          <el-table-column label="收益率" align="center" prop="earningRate">
            <template #default="scope">
              <span><el-input v-model="scope.row.earningRate" /></span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
              <span>
                <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1"></el-switch>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template #default="{ $index }">
              <el-tooltip content="移除" placement="top">
                <el-button link type="primary" icon="Remove" @click="handleRemove($index)" v-hasPermi="['retail:payOrder:view']"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-left:-120px;margin-top:30px;">
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="close()">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="AuthRole" lang="ts">
import { ProfitRatioVO } from "@/api/retail/profitRatio/types";
import { listProfitRatio, saveProfitRatio } from "@/api/retail/profitRatio";
import { UserForm } from "@/api/system/user/types";
import {QuestionFilled} from "@element-plus/icons-vue";

const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable,biz_pay_amount_range } =
  toRefs<any>(proxy?.useDict('sys_normal_disable','biz_pay_amount_range'));

let productList = ref();
let channelList = ref<Array<{channelName:string,channelCode:string}>>([]);
const loading = ref(true);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(100);
const ids = ref<Array<string | number>>([]);
const ratios = ref<ProfitRatioVO[]>([]);
const form = ref<Partial<UserForm>>({
  nickName: undefined,
  userName: "",
  userId: undefined
});

const tableRef = ref<ElTableInstance>();

/** 关闭按钮 */
const close = () => {
  let path : any = route.meta.activeMenu || "";
  const obj = { path: path };
  proxy?.$tab.closeOpenPage(obj);
};
/** 提交按钮 */
const submitForm = async () => {
  const userId = form.value.userId;
  const userName = form.value.userName;
  let submitFlag = true;
  ratios.value.forEach(ratio=>{
    if(ratio.status==0 && ratio.earningRate==null){
      submitFlag = false;
      proxy?.$modal.msgError('支付方式：'+ratio.paymentWay+'，已开启费率不能为空')
    }
  })
  if(submitFlag) {
    // 提交配置信息
    let data = {"userId":userId,"userName":userName,"ratioBoList":ratios.value};
    const res = await saveProfitRatio(data);
    proxy?.$modal.msgSuccess("設置成功");
    //close();
  }
};

const getList = async () => {
  const loginName = route.params && route.params.loginName;
  if (loginName) {
    loading.value = true;
    // .. loginName 獲取信息
    let res = listProfitRatio(loginName);
    res.then(r => {
      productList = r.data.productList;
      form.value.nickName = r.data.user.nickName
      form.value.userId = r.data.user.userId
      form.value.userName = r.data.user.userName
      for(const index in r.data.configList) {
        let ratio = r.data.configList[index];
        ratios.value.push(ratio);
      }
      for( const index in r.data.channelList) {
        let channel = r.data.channelList[index];
        channelList.value.push(channel);
      }
    })
    loading.value = false;
  }
};
/** 添加*/
const handleAdd = () => {
  const newRow: ProfitRatioVO = {
    id: '',
    userId: '',
    userName: '',
    paymentWay: '',
    earningRate: 0.00,
    status: 0
  };
  ratios.value.push(newRow);
}
const handleRemove = (index: number) => {
  ratios.value.splice(index, 1);
}
onMounted(() => {
  getList();
});
</script>
